<template>
  <div>
    <div class="info-top">
      <h2>基本信息</h2>
      <div class="user-btn-status">
        <!--        <span class="btn-user-r el-icon-folder-delete" @click="closePoint()">撤点</span>-->
        <span class="btn-user-r el-icon-edit-outline" @click="editPoint()">编辑</span>
      </div>
    </div>
    <div class="info-header">
      <h3>驻点信息</h3>
      <p class="info-deader-line">
        <span class="line-title">驻点名称</span>
        {{ pointData ? pointData.name : '' }}
      </p>
      <p class="info-deader-line">
        <span class="line-title">所在地区</span>
        {{ pointData ? pointData.inAddress : '' }}
      </p>
      <p class="info-deader-line">
        <span class="line-title">驻点地址</span>
        {{ pointData ? pointData.address : '' }}
      </p>
      <p class="info-deader-line">
        <span class="line-title">地理围栏</span>
        {{ pointData ? (pointData.distance?`半径${pointData.distance}米`:'') : '' }}
      </p>
      <div class="info-deader-map">
        <span class="line-title"></span>
        <div class="points-map-box">
          <div class="points-map" id="amapDetail"></div>
        </div>
      </div>
      <p class="info-deader-line">
        <span class="line-title">进场日期</span>
        {{ pointData ? pointData.createTime : '' }}
      </p>
      <p class="info-deader-line">
        <span class="line-title">驻点类型</span>
        <dict-tag
          v-if="pointData"
          :options="dict.type.sys_stagnation_type"
          :value="pointData.type"
        />
      </p>
    </div>
<!--    <div class="info-header">-->
<!--      <h3>辖区信息</h3>-->
<!--      <p class="info-deader-line">-->
<!--        <span class="line-title">所在派出所</span>-->
<!--        {{ pointData ? pointData.policeStation : '' }}-->
<!--      </p>-->
<!--      <p class="info-deader-line">-->
<!--        <span class="line-title">派出所地址</span>-->
<!--        {{ pointData ? pointData.policeAddress : '' }}-->
<!--      </p>-->
<!--      <p class="info-deader-line">-->
<!--        <span class="line-title">派出所联系人</span>-->
<!--        {{ pointData ? pointData.policeName : '' }}-->
<!--      </p>-->
<!--      <p class="info-deader-line">-->
<!--        <span class="line-title">派出所电话</span>-->
<!--        {{ pointData ? pointData.policePhone : '' }}-->
<!--      </p>-->
<!--      <p class="info-deader-line">-->
<!--        <span class="line-title">村/居委会</span>-->
<!--        {{ pointData ? pointData.committee : '' }}-->
<!--      </p>-->
<!--      <p class="info-deader-line">-->
<!--        <span class="line-title">办公室码</span>-->
<!--        {{ pointData ? pointData.code : '' }}-->
<!--      </p>-->
<!--    </div>-->
    <!--    执勤点编辑-->
    <zhudianAdd :visible.sync="zhudianVisible" @getList="getList" :paramId="paramId"></zhudianAdd>
  </div>
</template>

<script>
import zhudianAdd from "@/components/zhudian/add"

export default {
  name: "infoPoint",
  components: {zhudianAdd},
  dicts: ['sys_stagnation_type'],
  props: ['paramId', 'projectData', 'pointData'],
  data() {
    return {
      zhudianVisible: false,
      aMap: null,
      geocoder: null,
      marker: null,
      auto: null,
      circle: null
    }
  },
  watch: {
    pointData() {
      console.log('this.pointData', this.pointData)
      this.changeMap()
    }
  },
  created() {
    let that = this
    this.$nextTick(() => {
      that.createMap()
    })
  },
  methods: {
    closePoint() {
      this.$message.error('暂未开放')
    },
    getList() {
      this.$emit('getPointFn')
    },
    editPoint() {
      this.zhudianVisible = true
    },
    createMap() {
      const that = this
      if (this.pointData) {
        this.aMap = new AMap.Map('amapDetail', {
          mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
          resizeEnable: true,
          center: that.pointData ? [that.pointData.lon, that.pointData.lat] : that.$MapCenter,
          zoom: that.pointData ? 16 : that.$MapZoom
        })
        this.geocoder = new AMap.Geocoder({
          city: "010", //城市设为北京，默认：“全国”
          radius: 1000 //范围，默认：500
        });
        this.marker = new AMap.Marker();
        this.aMap.add(that.marker);
        this.marker.setPosition([parseFloat(that.pointData.lon), parseFloat(that.pointData.lat)]);
        this.changeMap()
      }
    },
    changeMap() {
      let that = this
      if (this.pointData.rangePoints) {
        let polygonArray;
        polygonArray = JSON.parse(this.pointData.rangePoints); //构建多边形经纬度坐标数组
        let arr = [];
        for (let j = 0; j < polygonArray.length; j++) {
          let ob = polygonArray[j];
          arr.push(new AMap.LngLat(ob.lng, ob.lat));
        }
        let zIndex = 10;
        let poly = new AMap.Polygon({
          map: this.map,
          path: arr,
          zIndex: zIndex,
          strokeColor: "#555",
          strokeOpacity: 0.5,
          strokeWeight: 1.5,
          // fillColor: strokeColor,
          fillOpacity: 0.35
        });
        poly.setMap(this.aMap);
      } else {
        this.circle = new AMap.Circle({
          center: [that.pointData.lon, that.pointData.lat],
          radius: that.pointData ? that.pointData.distance : 0, // 半径/米
          strokeColor: "#F33", // 线颜色
          // strokeColor: this.rgb(),  // 线颜色
          zIndex: 101,
          strokeOpacity: 1, //线透明度
          strokeWeight: 1, //线粗细度
          bubble: true, // 是否将覆盖物的鼠标或touch等事件冒泡到地图上
          fillColor: "#7c7cfb", //填充颜色
          fillOpacity: 0.35 //填充透明度
        });
        this.circle.setMap(this.aMap);
      }
    }
  }
}
</script>

<style scoped>
.info-top {
  display: flex;
  align-items: center;
}

.info-top h2 {
  font-size: 16px;
  flex: 1;
}

.user-btn-status {
  border: 1px solid #ddd;
  font-size: 12px;
  display: flex;
  align-items: center;
  border-radius: 15px;
  overflow: hidden;
}

.info-header {
  border-bottom: 1px solid #f4f4f4;
}

.info-header h3 {
  font-size: 14px;
}

.info-deader-line {
  font-size: 12px;
  display: flex;
  align-items: center;
}

.line-title {
  color: rgba(0, 0, 0, .3);
  font-size: 12px;
  display: block;
  width: 90px;
  padding-left: 10px;
}

.user-btn-status span {
  cursor: pointer;
  padding: 0 20px;
  height: 30px;
  display: block;
  line-height: 30px;
}

.user-btn-status span:first-child {
  border-right: 1px solid #ddd;
}

.user-btn-status span:hover {
  background: #f8f8f8;
}

.points-map-box {
  height: 300px;
  width: 100%;
  background: #f4f4f4;
}

.points-map {
  height: 300px;
  width: 100%;
}

.info-deader-map {
  display: flex;
}
</style>
